import { useEffect , useRef , useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import WowJumpBtn from '../../components/WowJumpBtn'
import WowSignInModal from '../../components/WowSiginInModal'

import "./index.less"

const Index = () => {

  const [showModal, setShowModal] = useState(false)
  const [signInInfo, setSignInInfo] = useState({})
  const isFirstRender = useRef(true)

  const signIn = async () => {
    const res = await Taro.$http.post('/api/gy/sign')
    setSignInInfo(res)

  }

  const goPages = url => {
    Taro.navigateTo({ url })
  }

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false
    } else {
      setShowModal(true)
    }
  }, [signInInfo])


  return (
    <View>
      {/* header */}
      <View className='header'>
        {/* background */}
        <Image className='bg' src={require('../../static/images/index-head-bg.png')} mode='widthFix' />
        {/* content */}
        <View className='content'>
          {/* text */}
          <View className='text'>
            <Text className='name'>羔羊公益</Text>
            <Text className='tip'>魔兽世界大秘境公益组队小程序</Text>
          </View>
          {/* notice */}
          <View className='notice'>
            {/* image */}
            <Image className='image' src={require('../../static/images/index-banner.png')} mode='widthFix' />
            {/* text */}
            <Text className='tip'>公告</Text>
          </View>
        </View>
      </View>
      <View className='main'>
        {/* navbar */}
        <View className='nav-list'>
          <View className='nav-item' onClick={() => goPages('/task/publish/index')}>
            <Image className='icon' src={require('../../static/images/index-publish-icon.png')} />
            <Text className='name'>发布任务</Text>
          </View>
          <View className='nav-item'>
            <Image className='icon' src={require('../../static/images/index-receive-icon.png')} />
            <Text className='name'>接受任务</Text>
          </View>
          <View className='nav-item' onClick={signIn}>
            <Image className='icon' src={require('../../static/images/index-signin-icon.png')} />
            <Text className='name'>签到</Text>
          </View>
        </View>
        <View className='about-list'>
          <WowJumpBtn name='我的信息' />
          <WowJumpBtn name='使用指南' />
          <WowJumpBtn name='帮助反馈' />
          <WowJumpBtn name='加入我们' />
        </View>
        {/* logo */}
        <Image className='logo' mode='widthFix' src={require('../../static/images/index-logo.png')} />
        <WowSignInModal info={signInInfo} show={showModal} close={() => setShowModal(false)} />
      </View>
    </View>
  )
}

export default Index